
import React, { CSSProperties } from 'react';
import styled from 'styled-components';

export const List = (props: {
    style?: CSSProperties,
    dataSource: Array<any>,
    itemLayout: 'horizontal' | 'vertical',
    renderItem: (item: any, index: number) => any
}) => {

    return (
        <Container style={props.style}>
            {
                props.dataSource && props.dataSource.map((item, index) => {
                    return (
                        <Item key={index}>
                            {props.renderItem(item, index)}
                        </Item>
                    );
                })
            }
        </Container>
    );
}

const Container = styled.ul`
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
`;

const Item = styled.li`
    width: 100%;
    border-bottom: 1px solid #dedede;
`;